<template>
  <div class="wallet-container">
    <div class="wallet-card">
      <div class="balance-info">
        <div class="logo">
          <div class="circle teal"></div>
          <div class="circle yellow"></div>
        </div>
        <div class="current-balance">
          <div class="balance-label">当前余额</div>
          <div class="balance-amount">${{ balance }}</div>
          <div class="online-recharge">在线充值</div>
        </div>
      </div>

      <div class="recharge-options">
        <div class="option-label">额度充值 请选择充值额度</div>
        
        <div class="recharge-grid">
          <!-- 5元 -->
          <div class="recharge-item" :class="{ active: selectedAmount === 5 }" @click="selectAmount(5)">
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">5 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 10.5元，节省2.00元
            </div>
          </div>
          
          <!-- 10元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 10 }" @click="selectAmount(10)">
            <div class="discount-tag">9 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">10 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 20.5元，节省4.50元
            </div>
          </div>
          
          <!-- 30元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 30 }" @click="selectAmount(30)">
            <div class="discount-tag">8.5 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">30 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 61.75元，节省13.25元
            </div>
          </div>
          
          <!-- 50元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 50 }" @click="selectAmount(50)">
            <div class="discount-tag">8.3 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">50 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 101.75元，节省23.25元
            </div>
          </div>
          
          <!-- 100元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 100 }" @click="selectAmount(100)">
            <div class="discount-tag">8.2 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">100 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 203元，节省47.00元
            </div>
          </div>
          
          <!-- 300元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 300 }" @click="selectAmount(300)">
            <div class="discount-tag">8 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">300 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 598元，节省152.00元
            </div>
          </div>
          
          <!-- 500元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 500 }" @click="selectAmount(500)">
            <div class="discount-tag">7.9 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">500 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 985.5元，节省264.50元
            </div>
          </div>
          
          <!-- 1000元 -->
          <div class="recharge-item discount" :class="{ active: selectedAmount === 1000 }" @click="selectAmount(1000)">
            <div class="discount-tag">7.8 折</div>
            <div class="amount-header">
              <div class="amount-icon">$</div>
              <div class="amount-value">1000 元</div>
            </div>
            <div class="discount-label">首充减 2元</div>
            <div class="price-details">
              实付 1948元，节省552.00元
            </div>
          </div>
        </div>
      </div>
      
      <div class="payment-methods">
        <button class="payment-btn wechat-btn" @click="handlePayment('微信')">
          <i class="wechat-icon"></i> 微信支付
        </button>
        <button class="payment-btn usdt-btn" @click="handlePayment('支付宝')">
          <i class="usdt-icon"></i> 支付宝
        </button>
      </div>
      
      <div class="payment-notice">
        <i class="notice-icon"></i> 暂停支付宝，如果开票对收款方有要求，暂时可以联系客服充值。
      </div>
      
      <div class="redeem-section">
        <div class="redeem-title">兑换余额</div>
        <div class="redeem-code">
          <input type="text" placeholder="请输入兑换码" v-model="redeemCode" />
          <button class="redeem-btn">兑换余额</button>
        </div>
        <div class="redeem-link">
          无法在线充值? <a href="#">购买兑换码</a>
        </div>
      </div>
    </div>
    
    <!-- 右侧信息卡片 -->
    <div class="info-cards">
      <!-- 透明奖励卡片 -->
      <div class="reward-card">
        <div class="card-title">透明奖励</div>
        <div class="reward-stats">
          <div class="stat-item">
            <div class="stat-value red-text">${{ pendingReward }}</div>
            <div class="stat-label">待使用收益</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">${{ totalReward }}</div>
            <div class="stat-label">总收益</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ rewardCount }}</div>
            <div class="stat-label">奖励次数</div>
          </div>
        </div>
        <div class="reward-actions">
          <button class="action-btn">提取到余额</button>
          <button class="action-btn">申请提现</button>
        </div>
        
        <div class="invitation-section">
          <div class="invitation-title">邀请链接</div>
          <div class="invitation-link">
            <input type="text" :value="invitationLink" readonly />
            <button class="copy-btn">复制</button>
          </div>
        </div>
        
        <div class="reward-rules">
          <div class="rules-title">奖励规则</div>
          <div class="rule-item">1. 被邀请注册的好友将获得 <span class="highlight">$0.3</span> 余额奖励</div>
          <div class="rule-item">2. 您将获得好友充值 <span class="highlight">2</span> 次充值额度的 <span class="highlight">10%</span> 收益</div>
          <div class="rule-item">3. 请勿作小号邀请自己，违规取消奖励，严重者将封号</div>
        </div>
      </div>
      
      <!-- VIP卡片 -->
      <div class="vip-card">
        <div class="vip-title">VIP尊享优惠</div>
        <div class="vip-info">
          <div class="vip-text">
            累积充值 3000元+ 可申请 VIP分组<br>
            日均消耗 百元+ 可申请VIP分组
          </div>
          <div class="vip-icon"></div>
        </div>
        <div class="vip-balance">
          您已累计充值 ${{ accumulatedRecharge }}
        </div>
      </div>
    </div>
</div>
</template>

<script setup>
import { ref } from 'vue';

const balance = ref('0.29');
const selectedAmount = ref(null);
const redeemCode = ref('');
const pendingReward = ref('0');
const totalReward = ref('0');
const rewardCount = ref('0');
const invitationLink = ref('https://api.v3.cm/register?aff=m9Dg');
const accumulatedRecharge = ref('0.30');

// 充值金额数据
const rechargeData = ref([
  { amount: 5, discount: null, discountText: null, price: 10.5, save: 2.00 },
  { amount: 10, discount: '9 折', discountText: '9 折', price: 20.5, save: 4.50 },
  { amount: 30, discount: '8.5 折', discountText: '8.5 折', price: 61.75, save: 13.25 },
  { amount: 50, discount: '8.3 折', discountText: '8.3 折', price: 101.75, save: 23.25 },
  { amount: 100, discount: '8.2 折', discountText: '8.2 折', price: 203, save: 47.00 },
  { amount: 300, discount: '8 折', discountText: '8 折', price: 598, save: 152.00 },
  { amount: 500, discount: '7.9 折', discountText: '7.9 折', price: 985.5, save: 264.50 },
  { amount: 1000, discount: '7.8 折', discountText: '7.8 折', price: 1948, save: 552.00 },
]);

const selectAmount = (amount) => {
  selectedAmount.value = amount;
};

// 处理支付按钮点击
const handlePayment = (paymentMethod) => {
  if (!selectedAmount.value) {
    alert('请先选择充值额度');
    return;
  }
  
  // 获取选中的充值项数据
  const selectedItem = rechargeData.value.find(item => item.amount === selectedAmount.value);
  
  if (selectedItem) {
    const message = `您选择了${paymentMethod}支付${selectedAmount.value}元额度
充值金额: ${selectedItem.price}元
优惠折扣: ${selectedItem.discount || '无折扣'}
节省金额: ${selectedItem.save}元`;
    
    alert(message);
  }
};
</script>

<style scoped>
.wallet-container {
  display: flex;
  gap: 15px;
  padding: 100px 15px;
  color: #fff;
  font-family: Arial, sans-serif;
  max-width: 1100px;
  margin: 0 auto;
}

.wallet-card {
  flex: 1;
  background-color: #1e1e2d;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 750px;
}

.info-cards {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.balance-info {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.logo {
  position: relative;
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.circle {
  position: absolute;
  border-radius: 50%;
  width: 35px;
  height: 35px;
}

.teal {
  background-color: #1dd1a1;
  z-index: 2;
}

.yellow {
  background-color: #feca57;
  top: 12px;
  left: 12px;
  z-index: 1;
}

.current-balance {
  flex: 1;
}

.balance-label {
  font-size: 14px;
  color: #8a8a9d;
  margin-bottom: 5px;
}

.balance-amount {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.online-recharge {
  font-size: 14px;
  color: #8a8a9d;
}

.option-label {
  font-size: 14px;
  color: #8a8a9d;
  margin-bottom: 15px;
}

.recharge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.recharge-item {
  position: relative;
  background-color: #252536;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.recharge-item:hover, .recharge-item.active {
  border-color: #7e3ff2;
  background-color: rgba(126, 63, 242, 0.1);
}

.discount-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #7e3ff2, #3f51f2);
  color: white;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 0 8px 0 8px;
}

.amount-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.amount-icon {
  width: 20px;
  height: 20px;
  background-color: #333344;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.amount-value {
  font-size: 16px;
  font-weight: bold;
}

.discount-label {
  color: #ff4757;
  font-size: 14px;
  margin-bottom: 8px;
}

.price-details {
  font-size: 12px;
  color: #8a8a9d;
}

.payment-methods {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.payment-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wechat-btn {
  background: linear-gradient(135deg, #1dd1a1, #10ac84);
}

.usdt-btn {
  background: linear-gradient(135deg, #7e3ff2, #3f51f2);
}

.payment-notice {
  display: flex;
  align-items: center;
  color: #8a8a9d;
  font-size: 12px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.notice-icon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  background-color: #ff4757;
  border-radius: 50%;
  display: inline-block;
}

.redeem-section {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

.redeem-title {
  font-size: 16px;
  margin-bottom: 15px;
}

.redeem-code {
  display: flex;
  margin-bottom: 10px;
}

.redeem-code input {
  flex: 1;
  padding: 12px;
  border-radius: 8px 0 0 8px;
  border: 1px solid #3f3f5f;
  background-color: #252536;
  color: white;
}

.redeem-btn {
  padding: 0 20px;
  border-radius: 0 8px 8px 0;
  border: none;
  background: linear-gradient(135deg, #7e3ff2, #3f51f2);
  color: white;
  cursor: pointer;
}

.redeem-link {
  font-size: 12px;
  color: #8a8a9d;
}

.redeem-link a {
  color: #7e3ff2;
  text-decoration: none;
}

/* 右侧卡片样式 */
.reward-card, .vip-card {
  background-color: #1e1e2d;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-title, .vip-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.reward-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #8a8a9d;
}

.red-text {
  color: #ff4757;
}

.reward-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #3f3f5f;
  background-color: #252536;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background-color: rgba(126, 63, 242, 0.1);
  border-color: #7e3ff2;
}

.invitation-section {
  margin-bottom: 20px;
}

.invitation-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.invitation-link {
  display: flex;
}

.invitation-link input {
  flex: 1;
  padding: 10px;
  border-radius: 8px 0 0 8px;
  border: 1px solid #3f3f5f;
  background-color: #252536;
  color: white;
  font-size: 12px;
}

.copy-btn {
  padding: 0 15px;
  border-radius: 0 8px 8px 0;
  border: none;
  background: linear-gradient(135deg, #7e3ff2, #3f51f2);
  color: white;
  cursor: pointer;
}

.reward-rules {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
}

.rules-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.rule-item {
  font-size: 12px;
  color: #8a8a9d;
  margin-bottom: 5px;
}

.highlight {
  color: #7e3ff2;
  font-weight: bold;
}

.vip-card {
  background: linear-gradient(145deg, #1e1e2d, #252536);
}

.vip-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.vip-text {
  flex: 1;
  font-size: 12px;
  color: #8a8a9d;
  line-height: 1.6;
}

.vip-icon {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #9b59b6, #8e44ad);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.vip-icon::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background: conic-gradient(#ff4757, #feca57, #1dd1a1, #3f51f2, #7e3ff2, #ff4757);
  border-radius: 50%;
}

.vip-balance {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
}
</style>